<template>
<div class="settings-container">
    <!-- <app-header></app-header> -->
    <div class="settings-card">
    <!-- <h2 class="settings-title">完善实名信息</h2> -->
    <div class="tab-header">
        <h2>完善实名信息</h2>
    </div>
    <base-form :model="userForm" :rules="rules" ref="userForm" label-width="120px">
        <base-form-item label="姓名" prop="name">
        <base-input v-model="userForm.name" placeholder="请输入姓名"></base-input>
        </base-form-item>

        <base-form-item label="机构" prop="institution">
        <base-input v-model="userForm.institution" placeholder="请输入所属机构"></base-input>
        </base-form-item>

        <base-form-item label="研究领域">
        <Keywords v-model="userForm.researchFields" text="研究领域"></Keywords>

        </base-form-item>

        <base-form-item label="ORCID">
        <base-input v-model="userForm.orcid" placeholder="请输入ORCID"></base-input>
        </base-form-item>

        <base-form-item label="邮箱" prop="email">
        <base-input v-model="userForm.email" placeholder="请输入邮箱"></base-input>
        </base-form-item>

        <base-form-item label="验证码">
        <div class="verification-code">
            <base-input v-model="userForm.verificationCode" placeholder="请输入验证码"></base-input>
            <base-button type="primary" class="verification-btn" @click="sendVerificationCode" :disabled="cooldown > 0">
            {{ cooldown > 0 ? `${cooldown}秒后重试` : '获取验证码' }}
            </base-button>
        </div>
        </base-form-item>

        <base-form-item class="submit-container">
        <base-button type="primary" class="submit-btn" @click="submitForm">保存修改</base-button>
        </base-form-item>
    </base-form>
    </div>
</div>
</template>

<script>
import AppHeader from '../components/AppHeader.vue';
import { UpdateUser,SendCode,VerifyCode } from '@/service/user'
import {Keywords} from '@zkwq/business'

export default {
components:{
    AppHeader,Keywords
},
data() {
    return {
    userForm: {
        id: '',
        name: '',
        institution: '',
        researchFields: [],
        researchField:'',
        orcid: '',
        email: '',
        verificationCode: ''
    },
    cooldown: 0,
    rules: {
        name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        institution: [
        { required: true, message: '请输入机构', trigger: 'blur' }
        ],
        researchField: [
        { required: true, message: '请输入研究领域', trigger: 'blur' }
        ],
        orcid: [
        { required: true, message: '请输入ORCID', trigger: 'blur' }
        ],
        email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        verificationCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
    }
    }
},
created() {
    this.userForm.id = this.user.id;
    this.userForm.name = this.user.name
    this.userForm.institution = this.user.institution
    this.userForm.researchFields = this.user.researchField?.split(';')
    this.userForm.orcid = this.user.orcid
    this.userForm.email = this.user.email
},

methods: {
    // 发送验证码
    sendVerificationCode() {
    console.log('aa')
    if (this.cooldown > 0) return
    if(!this.userForm.email){
        this.$message.error('请输入邮箱')
        return
    }

    // TODO: 调用发送验证码API
    SendCode(this.userForm.email).then(res => {
        if (res.code === 0) {
        this.$message.success('验证码发送成功')
        this.cooldown = 60
        const timer = setInterval(() => {
            this.cooldown--
            if (this.cooldown <= 0) {
            clearInterval(timer)
            }
        }, 1000)
        }else{
        this.$message.error('验证码发送失败,请重试')
        }
    })
    },
    
    // 提交表单
    submitForm() {
    if(!this.userForm.verificationCode){
        this.$message.error('请输入验证码')
        return

    }
    this.$refs.userForm.validate(async (valid) => {
        if (valid) {
        try {
            // 验证验证码
            const verifyRes = await VerifyCode(this.userForm.email, this.userForm.verificationCode)
            if (verifyRes.code !== 0) {
            this.$message.error('验证码错误')
            return
            }

            // TODO: 调用保存用户信息API
            this.userForm.researchField = this.userForm.researchFields.join(';')

            const res = await UpdateUser(this.userForm)
            if(res.code !== 0){
            this.$message.error(res.msg)
            return
            }
            this.setUser(res.data)
            this.$message.success('保存成功')
            if(this.$route.query.redirect){
            location.href = decodeURIComponent(this.$route.query.redirect)
            }else{
            this.$router.push('/')
            }
        } catch (error) {
            console.log(error)

            this.$message.error('保存失败')
        }
        }
    })
    }
}
}
</script>

<style lang="scss" scoped>
  .tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e8e8e8;
    
    h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #333;
    }
  }
  .settings-container {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
  }
  
  .settings-card {
    width: 800px;
    margin: none !important;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 18px 16px;
    
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
  }
  
  .settings-card:hover {
    transform: translateY(-2px);
  }
  
  .settings-title {
    font-size: 28px;
    color: #2c3e50;
    margin: 0 0 35px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eef2f7;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  
  .verification-code {
    display: flex;
    gap: 15px;
  }
  
  .verification-code .el-input {
    flex: 1;
  }
  
  .verification-btn {
    min-width: 120px;
    background: linear-gradient(45deg, #4481eb, #04befe);
    border: none;
    transition: all 0.3s ease;
  }
  
  .verification-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(68, 129, 235, 0.2);
  }
  
  .submit-container {
    margin-top: 45px;
    text-align: center;
  }
  
  .submit-btn {
    min-width: 140px;
    padding: 12px 35px;
    font-size: 16px;
    background: linear-gradient(45deg, #4481eb, #04befe);
    border: none;
    letter-spacing: 1px;
    transition: all 0.3s ease;
  }
  
  .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(68, 129, 235, 0.2);
  }
  
  /* 输入框样式优化 */
  :deep(.el-input__inner) {
    height: 42px;
    line-height: 42px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  :deep(.el-input__inner:focus) {
    border-color: #4481eb;
    box-shadow: 0 0 0 2px rgba(68, 129, 235, 0.1);
  }
  
  /* 表单项间距优化 */
  :deep(.el-form-item) {
    margin-bottom: 28px;
  }
  
  /* 标签文字样式优化 */
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #2c3e50;
    font-size: 15px;
  }
  
  /* 禁用状态样式 */
  :deep(.el-button.is-disabled) {
    background: #a0cfff !important;
    border: none;
    opacity: 0.7;
  }
  </style>